<div class="panel panel-default" id="users_list">
    <div class="panel-heading">
        <h3 class="panel-title">
            All Users (<em>{{ users.length }}</em>)
        </h3>

        <!-- <div class="panel-options">
            <a href="#" data-toggle="panel">
                <span class="collapse-icon">–</span>
                <span class="expand-icon">+</span>
            </a>
        </div> -->
    </div>

    <div class="panel-body btn-toolbar">
        <div class="btn-group focus-btn-group">
            <button class="btn btn-success btn-sm" @click="add">
                <span class="sog-icon sog-icon-add"></span> Add User
            </button>
        </div>
    </div>

    <table class="table table-model-2 table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Remark</th>
                <th>Operation</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="user in users">
                <td>{{ i }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.tag }}</td>
                <td>
                <button @click="edit(user)" class="btn btn-success btn-sm btn-icon icon-left">Edit</button>
                <button @click="del(user)" class="btn btn-danger btn-sm btn-icon icon-left">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>